<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https:at.alicdn.com/t/font_975764_3r2oc75uoi.css">
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
        <link rel="stylesheet" href="css/login.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class="page">
            <div class="nav">
                首次使用需要绑定手机号
            </div>
            <div class="input">
                <form action="">
                    <div class="child ">
                        <div class="left">
                           <i class="iconfont  icon-shouji"></i>
                        </div>
                        <div class="right">
                            <input class="weui-input ipone" type="text" placeholder="请输入手机号码">
                        </div>
                    </div>
                    <div class="child ">
                        <div class="left">
                            <i class="iconfont  icon-yaochi"></i>
                        </div>
                        <div class="right">
                            <input class="weui-input yzm" type="text" placeholder="请输入验证码">
                            <button href="javascript:;" class="weui-btn dx weui-btn_mini weui-btn_primary">获取短信验证码</button>
                        </div>
                    </div>

                </form>
            </div>

            <div class="next">
                <a href="javascript:;" class="weui-btn lan">下一步</a>
            </div>
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
        <script type="text/javascript">
       
          let pandu = false;
          
           $(".dx").click(()=>{
                var phone = jQuery(".ipone").val(),
                   dx = $('.yzm').val();               
                   var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;      
               if(myreg.test(phone)){
                    pandu=true;
                    weui.alert('短信验证码已发送！', function () {
                        console.log('ok');
                        }, {
                        title: ''
                    });
               }else{
                   weui.topTips('请填写正确的手机号', {
                        duration: 3000,
                        className: "custom-classname",
                        callback: function callback() {
                            console.log('close');
                        }
                    });
               }
        
           });
           $(".dx").click(btnCheck);
           $(".lan").click(()=>{
               var phone = jQuery(".ipone").val(),
                   dx = $('.yzm').val();
              
               
                var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;       
                if(phone == ''){
                    weui.alert("手机号码不能为空！");
                }else if(phone.length !=11){
                    weui.alert("请输入有效的手机号码！");
                }else if(!myreg.test(phone)){
                    weui.alert("请输入有效的手机号码！");
                }else if(phone=='18776007488'){
                    weui.alert("该手机号码已经被绑定！");
                }else if(dx== ''){
                    weui.alert("短信验证码不能为空！");
                }else if(dx!=123456){
                    weui.alert("短信验证码错误！");
                }

              
           })
            /**
            * 
            */
            function btnCheck() {
                if(!pandu){
                    return false;
                }
          
            var time = 5;
            $(this).attr("disabled", true);
            var that = $(this);
            var timer = setInterval(function() {
            if (time == 0) {
                clearInterval(timer);
                that.attr("disabled", false);
                that.html("重新获取验证码");
               
            } else {
                that.html(time + "秒");
                time--;
            }
            }, 1000);
            }
        </script> 
    </body>
</html>